React Portallari: Yaxshilangan UX uchun Modallar va Maslahatlarni O'zlashtirish

Zamonaviy veb-dasturlashda intuitiv va jozibador foydalanuvchi interfeyslarini yaratish juda muhim. Foydalanuvchi interfeyslarini yaratish uchun mashhur JavaScript kutubxonasi bo'lgan React bunga erishish uchun turli xil vositalar va usullarni taqdim etadi. Shunday kuchli vositalardan biri bu React Portallari. Ushbu blog posti React Portallari dunyosiga sho'ng'iydi va ularning qulay va jozibali modallar hamda maslahatlar yaratishda qo'llanilishiga e'tibor qaratadi.

React Portallari nima?

React Portallari komponent bolalarini ota-ona komponentining DOM iyerarxiyasidan tashqarida mavjud bo'lgan DOM tuguniga render qilish usulini taklif etadi. Oddiyroq qilib aytganda, bu standart React komponentlar daraxtidan xalos bo'lish va elementlarni to'g'ridan-to'g'ri HTML strukturasining boshqa qismiga joylashtirish imkonini beradi. Bu, ayniqsa, stacking kontekstini nazorat qilish yoki elementlarni ota-ona konteynerining chegaralaridan tashqarida joylashtirish kerak bo'lgan holatlar uchun foydalidir.

An'anaga ko'ra, React komponentlari DOM ichida ota-ona komponentlarining bolalari sifatida render qilinadi. Bu ba'zan uslublash va joylashuv bilan bog'liq muammolarga olib kelishi mumkin, ayniqsa boshqa kontent ustida paydo bo'lishi yoki ko'rish maydoniga nisbatan joylashishi kerak bo'lgan modallar yoki maslahatlar kabi elementlar bilan ishlaganda. React Portallari ushbu elementlarni to'g'ridan-to'g'ri DOM daraxtining boshqa qismiga render qilishga imkon berib, bu cheklovlarni chetlab o'tish orqali yechim taqdim etadi.

Nima uchun React Portallaridan foydalanish kerak?

Bir nechta asosiy afzalliklar React Portallarini sizning React dasturlash arsenalingizdagi qimmatli vositaga aylantiradi:

• Yaxshilangan Uslub va Joylashuv: Portallar elementlarni ota-ona konteyneridan tashqarida joylashtirishga imkon beradi, bu esa overflow: hidden, z-index cheklovlari yoki murakkab joylashuv cheklovlari tufayli yuzaga keladigan uslublash muammolarini bartaraf etadi. Tasavvur qiling, modal ota-ona konteynerida overflow: hidden o'rnatilgan bo'lsa ham, butun ekranni qoplashi kerak. Portallar modalni to'g'ridan-to'g'ri body ichiga render qilishga imkon berib, bu cheklovni chetlab o'tadi.
• Kengaytirilgan Qulaylik: Portallar, ayniqsa modallar bilan ishlaganda, qulaylik uchun juda muhimdir. Modal tarkibini to'g'ridan-to'g'ri body ichiga render qilish fokusni ushlab turishni osonlashtiradi, bu esa ekran o'quvchilari yoki klaviatura orqali navigatsiya qiluvchi foydalanuvchilarning modal ochiq bo'lganida uning ichida qolishini ta'minlaydi. Bu uzluksiz va qulay foydalanuvchi tajribasini ta'minlash uchun zarurdir.
• Tozaroq Komponent Tuzilmasi: Modal yoki maslahat tarkibini asosiy komponentlar daraxtidan tashqarida render qilish orqali siz komponent tuzilmangizni toza va boshqariladigan holda saqlashingiz mumkin. Bu mas'uliyatlarni ajratish kodingizni o'qish, tushunish va saqlashni osonlashtiradi.
• Stacking Konteksti Muammolaridan Qochish: CSS-dagi stacking kontekstlarini boshqarish juda qiyin bo'lishi mumkin. Portallar elementlarni to'g'ridan-to'g'ri DOM ildiziga render qilishga imkon berib, ularning sahifadagi boshqa elementlarga nisbatan har doim to'g'ri joylashishini ta'minlash orqali ushbu muammolardan qochishga yordam beradi.

React Portallari yordamida Modallarni Amalga Oshirish

Modallar muhim ma'lumotlarni ko'rsatish yoki foydalanuvchilardan ma'lumot kiritishni so'rash uchun ishlatiladigan keng tarqalgan UI naqshidir. Keling, React Portallari yordamida modal yaratishni ko'rib chiqaylik.

1. Portal Ildizini Yaratish

Birinchi navbatda, modal render qilinadigan DOM tugunini yaratishingiz kerak. Bu odatda HTML faylingizga (odatda body ichida) ma'lum bir ID ga ega div elementini qo'shish orqali amalga oshiriladi:

            <div id="modal-root"></div>
            

              
                Copy
              
            
          

2. Modal Komponentini Yaratish

Keyin, modalni ifodalovchi React komponentini yarating. Ushbu komponent modalning tarkibi va mantiqini o'z ichiga oladi.

            import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ isOpen, onClose, children }) => {
  const [mounted, setMounted] = useState(false);
  const modalRoot = useRef(document.getElementById('modal-root'));

  useEffect(() => {
    setMounted(true);
    return () => setMounted(false);
  }, []);

  if (!isOpen) return null;

  const modalContent = (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        {children}
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );

  return mounted && modalRoot.current
    ? ReactDOM.createPortal(modalContent, modalRoot.current)
    : null;
};

export default Modal;

            

              
                Copy
              
            
          

Tushuntirish:

• isOpen prop: Modalning ko'rinishini belgilaydi.
• onClose prop: Modalni yopish uchun funksiya.
• children prop: Modal ichida ko'rsatiladigan tarkib.
• modalRoot ref: Modal render qilinadigan DOM tuguniga ishora qiladi (#modal-root).
• useEffect hook: Portal ildizi darhol mavjud bo'lmasligi bilan bog'liq muammolarni oldini olish uchun modal faqat komponent yuklangandan so'ng render qilinishini ta'minlaydi.
• ReactDOM.createPortal: Bu React Portallaridan foydalanishning kalitidir. U ikkita argument qabul qiladi: render qilinadigan React elementi (modalContent) va u render qilinishi kerak bo'lgan DOM tuguni (modalRoot.current).
• Fonga bosish: Modalni yopadi. Biz modal ichidagi bosishlar uni yopib qo'yishining oldini olish uchun modal-content divida e.stopPropagation() dan foydalanamiz.

3. Modal Komponentidan Foydalanish

Endi siz Modal komponentini o'z ilovangizda ishlatishingiz mumkin:

            import React, { useState } from 'react';
import Modal from './Modal';

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>

      <Modal isOpen={isModalOpen} onClose={closeModal}>
        <h2>Modal Content</h2>
        <p>This is the content of the modal.</p>
      </Modal>
    </div>
  );
};

export default App;

            

              
                Copy
              
            
          

Ushbu misol isOpen prop va openModal hamda closeModal funksiyalari yordamida modalning ko'rinishini qanday boshqarishni ko'rsatadi. <Modal> teglari ichidagi tarkib modal ichida render qilinadi.

4. Modalga Uslub Berish

Modalni joylashtirish va uslub berish uchun CSS uslublarini qo'shing. Mana oddiy misol:

            .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Ensure it's on top of other content */
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

            

              
                Copy
              
            
          

CSS Tushuntirishi:

• position: fixed: Skroll qilishdan qat'i nazar, modalning butun ko'rish maydonini qoplashini ta'minlaydi.
• background-color: rgba(0, 0, 0, 0.5): Modal orqasida yarim shaffof fon yaratadi.
• display: flex, justify-content: center, align-items: center: Modalni gorizontal va vertikal ravishda markazlashtiradi.
• z-index: 1000: Modalning sahifadagi barcha boshqa elementlar ustida render qilinishini ta'minlaydi.

5. Modallar uchun Qulaylik Masalalari

Modallarni amalga oshirishda qulaylik juda muhim. Mana bir nechta asosiy mulohazalar:

• Fokusni Boshqarish: Modal ochilganda, fokus avtomatik ravishda modal ichidagi elementga (masalan, birinchi kiritish maydoni yoki yopish tugmasi) o'tkazilishi kerak. Modal yopilganda, fokus modalni ochgan elementga qaytarilishi kerak. Bunga ko'pincha React'ning useRef hook'i yordamida avval fokuslangan elementni saqlash orqali erishiladi.
• Klaviatura orqali Navigatsiya: Foydalanuvchilar modalni klaviatura (Tab tugmasi) yordamida boshqara olishiga ishonch hosil qiling. Fokus modal ichida qolib, foydalanuvchilarning tasodifan undan chiqib ketishining oldini olish kerak. react-focus-lock kabi kutubxonalar bu borada yordam berishi mumkin.
• ARIA Atributlari: Ekran o'quvchilariga modal haqida semantik ma'lumot berish uchun ARIA atributlaridan foydalaning. Masalan, modal konteynerida aria-modal="true" dan va modal uchun tavsiflovchi yorliq berish uchun aria-label yoki aria-labelledby dan foydalaning.
• Yopish Mexanizmi: Modalni yopish uchun bir nechta usullarni taqdim eting, masalan, yopish tugmasi, fonga bosish yoki Escape tugmasini bosish.

Fokusni Boshqarish Misoli (useRef yordamida):

            import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ isOpen, onClose, children }) => {
  const [mounted, setMounted] = useState(false);
  const modalRoot = useRef(document.getElementById('modal-root'));
  const firstFocusableElement = useRef(null);
  const previouslyFocusedElement = useRef(null);

  useEffect(() => {
    setMounted(true);
    if (isOpen) {
      previouslyFocusedElement.current = document.activeElement;
      if (firstFocusableElement.current) {
        firstFocusableElement.current.focus();
      }

      const handleKeyDown = (event) => {
        if (event.key === 'Escape') {
          onClose();
        }
      };

      document.addEventListener('keydown', handleKeyDown);

      return () => {
        document.removeEventListener('keydown', handleKeyDown);
        if (previouslyFocusedElement.current) {
          previouslyFocusedElement.current.focus();
        }
      };
    }

    return () => setMounted(false);
  }, [isOpen, onClose]);


  if (!isOpen) return null;

  const modalContent = (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <h2>Modal Content</h2>
        <p>This is the content of the modal.</p>
        <input type="text" ref={firstFocusableElement} /> <!-- First focusable element -->
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );

  return mounted && modalRoot.current
    ? ReactDOM.createPortal(modalContent, modalRoot.current)
    : null;
};

export default Modal;

            

              
                Copy
              
            
          

Fokusni Boshqarish Kodi Tushuntirishi:

• previouslyFocusedElement.current: Modal ochilishidan oldin fokusda bo'lgan elementni saqlaydi.
• firstFocusableElement.current: Modal *ichidagi* birinchi fokuslanadigan elementga ishora qiladi (bu misolda matn kiritish maydoni).
• Modal ochilganda (isOpen true bo'lganda):
  • Hozirgi fokuslangan element saqlanadi.
  • Fokus firstFocusableElement.current ga o'tkaziladi.
  • Escape tugmasini tinglash uchun hodisa tinglovchisi qo'shiladi va u modalni yopadi.
• Modal yopilganda (tozalash funksiyasi):
  • Escape tugmasi hodisasi tinglovchisi olib tashlanadi.
  • Fokus avval fokuslangan elementga qaytariladi.

React Portallari yordamida Maslahatlarni Amalga Oshirish

Maslahatlar (tooltips) - bu foydalanuvchi biror element ustiga sichqonchani olib borganida paydo bo'ladigan kichik, ma'lumot beruvchi qalqib chiquvchi oynachalar. React Portallari yordamida ota-ona elementining uslubi yoki joylashuvidan qat'i nazar, to'g'ri joylashtirilgan maslahatlar yaratish mumkin.

1. Portal Ildizini Yaratish (agar hali yaratilmagan bo'lsa)

Agar siz modallar uchun portal ildizini yaratmagan bo'lsangiz, HTML faylingizga (odatda body ichida) ma'lum bir ID ga ega div elementini qo'shing:

            <div id="tooltip-root"></div>
            

              
                Copy
              
            
          

2. Maslahat Komponentini Yaratish

            import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Tooltip = ({ text, children, position = 'top' }) => {
  const [isVisible, setIsVisible] = useState(false);
  const [positionStyle, setPositionStyle] = useState({});
  const [mounted, setMounted] = useState(false);

  const tooltipRoot = useRef(document.getElementById('tooltip-root'));
  const tooltipRef = useRef(null);
  const triggerRef = useRef(null);

  useEffect(() => {
    setMounted(true);
    return () => setMounted(false);
  }, []);

  const handleMouseEnter = () => {
    setIsVisible(true);
    updatePosition();
  };

  const handleMouseLeave = () => {
    setIsVisible(false);
  };

  const updatePosition = () => {
    if (!triggerRef.current || !tooltipRef.current) return;

    const triggerRect = triggerRef.current.getBoundingClientRect();
    const tooltipRect = tooltipRef.current.getBoundingClientRect();

    let top = 0;
    let left = 0;

    switch (position) {
      case 'top':
        top = triggerRect.top - tooltipRect.height - 5; // 5px spacing
        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
        break;
      case 'bottom':
        top = triggerRect.bottom + 5;
        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
        break;
      case 'left':
        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
        left = triggerRect.left - tooltipRect.width - 5;
        break;
      case 'right':
        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
        left = triggerRect.right + 5;
        break;
      default:
        break;
    }

    setPositionStyle({
      top: `${top}px`,
      left: `${left}px`,
    });
  };

  const tooltipContent = isVisible && (
    <div className="tooltip" style={positionStyle} ref={tooltipRef}>
      {text}
    </div>
  );

  return (
    <span
      ref={triggerRef}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      {children}
      {mounted && tooltipRoot.current ? ReactDOM.createPortal(tooltipContent, tooltipRoot.current) : null}
    </span>
  );
};

export default Tooltip;

            

              
                Copy
              
            
          

Tushuntirish:

• text prop: Maslahatda ko'rsatiladigan matn.
• children prop: Maslahatni ishga tushiradigan element (foydalanuvchi sichqonchani olib boradigan element).
• position prop: Maslahatning trigger elementiga nisbatan pozitsiyasi ('top', 'bottom', 'left', 'right'). Standart qiymati 'top'.
• isVisible state: Maslahatning ko'rinishini boshqaradi.
• tooltipRoot ref: Maslahat render qilinadigan DOM tuguniga ishora qiladi (#tooltip-root).
• tooltipRef ref: Maslahat elementining o'ziga ishora qiladi, uning o'lchamlarini hisoblash uchun ishlatiladi.
• triggerRef ref: Maslahatni ishga tushiradigan elementga ishora qiladi (children).
• handleMouseEnter va handleMouseLeave: Trigger elementi ustiga sichqonchani olib borish va olib tashlash uchun hodisa ishlovchilari.
• updatePosition: position propiga va trigger hamda maslahat elementlarining o'lchamlariga asoslanib maslahatning to'g'ri pozitsiyasini hisoblaydi. U elementlarning ko'rish maydoniga nisbatan pozitsiyasi va o'lchamlarini olish uchun getBoundingClientRect() dan foydalanadi.
• ReactDOM.createPortal: Maslahat tarkibini tooltipRoot ichiga render qiladi.

3. Maslahat Komponentidan Foydalanish

            import React from 'react';
import Tooltip from './Tooltip';

const App = () => {
  return (
    <div>
      <p>
        Hover over this <Tooltip text="This is a tooltip!
With multiple lines."
position="bottom">text</Tooltip> to see a tooltip.
      </p>

      <button>
        Hover <Tooltip text="Button tooltip" position="top">here</Tooltip> for tooltip.
      </button>
    </div>
  );
};

export default App;

            

              
                Copy
              
            
          

Ushbu misol Tooltip komponentidan matn va tugmalarga maslahatlar qo'shish uchun qanday foydalanishni ko'rsatadi. Siz maslahat matni va pozitsiyasini text va position proplari yordamida sozlashingiz mumkin.

4. Maslahatga Uslub Berish

Maslahatni joylashtirish va uslub berish uchun CSS uslublarini qo'shing. Mana oddiy misol:

            .tooltip {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8); /* Dark background */
  color: white;
  padding: 5px;
  border-radius: 3px;
  font-size: 12px;
  z-index: 1000; /* Ensure it's on top of other content */
  white-space: pre-line; /* Respect line breaks in the text prop */
}

            

              
                Copy
              
            
          

CSS Tushuntirishi:

• position: absolute: Maslahatni tooltip-root ga nisbatan joylashtiradi. React komponentidagi updatePosition funksiyasi maslahatni trigger elementi yaqinida joylashtirish uchun aniq top va left qiymatlarini hisoblaydi.
• background-color: rgba(0, 0, 0, 0.8): Maslahat uchun biroz shaffof qora fon yaratadi.
• white-space: pre-line: Bu text propiga kiritishingiz mumkin bo'lgan satr uzilishlarini saqlab qolish uchun muhim. Busiz maslahat matni bitta satrda ko'rinadi.

Global Mulohazalar va Eng Yaxshi Amaliyotlar

React ilovalarini global auditoriya uchun ishlab chiqishda quyidagi eng yaxshi amaliyotlarni hisobga oling:

• Xalqarolashtirish (i18n): Tarjimalar va lokalizatsiyani boshqarish uchun react-i18next yoki FormatJS kabi kutubxonalardan foydalaning. Bu ilovangizni turli tillar va mintaqalarga osongina moslashtirish imkonini beradi. Modallar va maslahatlar uchun matn tarkibining to'g'ri tarjima qilinganligiga ishonch hosil qiling.
• O'ngdan-chapga (RTL) qo'llab-quvvatlash: O'ngdan chapga o'qiladigan tillar (masalan, arab, ibroniy) uchun modallar va maslahatlaringiz to'g'ri ko'rsatilishiga ishonch hosil qiling. RTL tartiblariga moslashish uchun elementlarning joylashuvi va uslubini o'zgartirishingiz kerak bo'lishi mumkin. CSS mantiqiy xususiyatlari (masalan, margin-left o'rniga margin-inline-start) yordam berishi mumkin.
• Madaniy Nozikliklar: Modallar va maslahatlaringizni loyihalashda madaniy farqlarni yodda tuting. Muayyan madaniyatlarda haqoratli yoki nomaqbul bo'lishi mumkin bo'lgan tasvirlar yoki belgilardan foydalanishdan saqlaning.
• Vaqt Mintaqalari va Sana Formatlari: Agar modallar yoki maslahatlaringiz sana yoki vaqtni ko'rsatsa, ularning foydalanuvchining lokali va vaqt mintaqasiga muvofiq formatlanganligiga ishonch hosil qiling. moment.js (eski bo'lsa-da, hali ham keng qo'llaniladi) yoki date-fns kabi kutubxonalar bu borada yordam berishi mumkin.
• Turli Imkoniyatlar uchun Qulaylik: Modallar va maslahatlaringiz nogironligi bo'lgan odamlar tomonidan ishlatilishi mumkinligini ta'minlash uchun qulaylik bo'yicha ko'rsatmalarga (WCAG) rioya qiling. Bunga tasvirlar uchun alternativ matn taqdim etish, yetarli rang kontrastini ta'minlash va klaviatura orqali navigatsiyani qo'llab-quvvatlash kiradi.

Xulosa

React Portallari moslashuvchan va qulay foydalanuvchi interfeyslarini yaratish uchun kuchli vositadir. Ulardan samarali foydalanishni tushunib, siz foydalanuvchi tajribasini oshiradigan va React ilovalaringizning tuzilishini va saqlanishini yaxshilaydigan modallar va maslahatlar yaratishingiz mumkin. Turli auditoriya uchun ishlab chiqishda qulaylik va global mulohazalarga ustuvor ahamiyat berishni unutmang, bu sizning ilovalaringizning hamma uchun inklyuziv va foydalanishga yaroqli bo'lishini ta'minlaydi.

Qo'shimcha O'rganish Uchun

• React Portallari Hujjatlari
• Veb Kontentining Qulaylik Qo'llanmalari (WCAG)
• react-i18next